<template>
  <div class="s-calendar">
    <content-header :title="title">
      <template #title>
        <el-button-group style="float:right" round>
          <el-button size="small" @click="handlePrevMonth">上月</el-button>
          <el-button size="small" @click="handleToday">今天</el-button>
          <el-button size="small" @click="handleNextMonth">下月</el-button>
        </el-button-group>
      </template>
      <table class="el-calendar-table is-range" cellspacing="0" cellpadding="0">
        <thead>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
          <th>周六</th>
          <th>周日</th>
        </thead>
        <tbody>
          <tr class="el-calendar-table__row" v-for="(items, idx) in days" :key="'week-' + idx">
            <td :class="{
              current: item.current,
              prev: item.prev,
              next: item.next
            }" v-for="item in items" :key="item.date">
            <div class="el-calendar-day">
              <div>{{ item.text }}</div>
              <slot :date="item.date"></slot>
            </div>  
          </td>
          </tr>
        </tbody>
      </table>
    </content-header>
  </div>
</template>

<script setup lang="ts">
import moment from 'moment'
import { computed } from 'vue'

interface Props {
  dateFormat: string
}

interface DateItem {
  date: string
  text: string
  current: boolean
  prev: boolean
  next: boolean
}

const model = defineModel({
  default: moment().format('YYYY-MM-DD')
})
const props = withDefaults(defineProps<Props>(), {
  dateFormat: 'MM-DD'
})
const emit = defineEmits(['change'])

const title = computed(() => moment(model.value).format('YYYY年MM月'))
const month = computed(() => moment(model.value))
const days = computed(() => {
  let s = moment(model.value).startOf('month').startOf('week')
  const m = moment(model.value).format('YYYY-MM')
  const e = moment(model.value).endOf('month').endOf('week')
  const p = moment(model.value).subtract(1, 'month').format('YYYY-MM')
  const n = moment(model.value).add(1, 'month').format('YYYY-MM')
  let results : DateItem[][] = []
  results.push([])
  let i = 0
  while(s < e) {
    if (results[i].length !== 7) {
      results[i].push({
        date: s.format('YYYY-MM-DD'),
        text: s.format(props.dateFormat),
        current: s.format('YYYY-MM') == m,
        prev: s.format('YYYY-MM') == p,
        next: s.format('YYYY-MM') == n,
      })
      s.add(1, 'day')
    } else {
      results.push([])
      i++
    }
  }
  return results
})

const changed = (day : any) => {
  if (day.format('YYYY-MM-DD') == month.value.format('YYYY-MM-DD')) {
    return
  }
  const start = moment(day).startOf('month')
  const end = moment(day).endOf('month')
  model.value = day.format('YYYY-MM-DD')
  emit('change', {day, start, end})
}

function handlePrevMonth() {
  changed(moment(month.value).subtract(1, 'month'))
}

function handleToday() {
  changed(moment())
}

function handleNextMonth() {
  changed(moment(month.value).add(1, 'month'))
}
</script>

<style lang="less">
.s-calendar{
  width:100%;
  --el-calendar-border:var(--el-table-border, 1px solid var(--el-border-color-lighter));

  .el-calendar-table{
    .prev{
      color: #c0c4cc;
    }
    .next{
      color: #c0c4cc;
    }

    .el-calendar-day{
      min-height: 100px;
    }
  }
}
</style>
